<template>
  <div class="globalHeader">
    <a-layout-header>
      <a-row :wrap="false">
        <a-col flex="160px">
          <router-link class="logo" to="/">
            <img class="logoImg" src="../assets/logo.svg" alt="logo" />
            <div class="logoTitle">秀秀图床</div>
          </router-link>
        </a-col>
        <a-col flex="auto">
          <a-menu
            v-model:selectedKeys="current"
            mode="horizontal"
            :items="items"
            @click="doMenuClick"
          />
        </a-col>
        <a-col flex="150px">
          <div class="userLogin">
            <div v-if="loginUserStore.loginUser.username">
              <a-avatar :size="40">{{ loginUserStore.loginUser.username.slice(0, 1) }}</a-avatar>
            </div>
            <a-button v-else type="primary" href="/user/login">用户登录</a-button>
          </div>
        </a-col>
      </a-row>
    </a-layout-header>
  </div>
</template>
<script lang="ts" setup>
import { h, ref } from 'vue'
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'

const loginUserStore = useLoginUserStore()
// 当前高亮的菜单
const current = ref<string[]>(['home'])
// 菜单项
const items = ref<MenuProps['items']>([
  {
    key: '/',
    icon: () => h(MailOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: '/about',
    icon: () => h(AppstoreOutlined),
    label: '关于',
    title: '关于',
  },
  {
    key: 'others',
    label: h('a', { href: 'https://blog.csdn.net/XiugongHao', target: '_blank' }, '个人博客'),
    title: '个人博客',
  },
])
const router = useRouter()
// 点击菜单项跳转
const doMenuClick = ({ key }: { key: string }) => {
  router.push(key)
}
// 路由跳转后触发的钩子
router.afterEach((to, from, next) => {
  current.value = [to.path]
})
</script>
<style scoped lang="scss">
.globalHeader {
  .ant-layout-header {
    margin-bottom: 16px;
    background: white;
    color: unset;

    .logo {
      display: flex;
      background: linear-gradient(to right, #fefefe, white);

      .logoImg {
        width: 48px;
      }

      .logoTitle {
        font-size: 18px;
        color: black;
      }
    }

    .userLogin {
      right: 20px;
    }
  }
}
</style>
